{extend name='table'}

{block name="style"}
<style>
    .layui-tab-content {
        display: flex;
    }
    .panel_left {
        width: 250px;
        flex-shrink: 0;
        margin-right: 20px;
        /*overflow-y: auto;*/
    }
    .panel_right {
        width: 100%;
    }
    .search-input {
        border-right: none;
        border-left: none;
        border-top: none;
    }
    .search-input:focus {
        border-bottom-color: #DDD !important;
    }
    .tree {
        padding-top: 10px;
        height: calc(100% - 50px);overflow-y: auto;
    }
    .tips {
        line-height: 24px;
        padding: 10px;
        font-size: 14px;
    }
    .operator_btn {
        display: flex;
        border-bottom: 1px solid #EEE;
        line-height: 40px;
        padding: 0 10px;
    }
    .operator_btn span {
        color: #008aff;
        margin-right: 10px;
        cursor: pointer;
    }
</style>
{/block}


{block name="content"}


<div class="layui-tab layui-tab-card">

    <div class="layui-tab-content">

        <div class="panel_left">
            <div class="layui-panel" style="height: 100%;">
                <input type="text" placeholder="{:lang('请输入关键字按回车键搜索')}" id="search_btn" class="layui-input search-input">
                <!--<div class="operator_btn">
                    <span>清空筛选</span>
                    <span>展开</span>
                    <span>折叠</span>
                    <span>回到根级</span>
                </div>-->
                <div class="tree">
                    <div id="tree_list"></div>
                </div>
            </div>
        </div>
        <div class="panel_right">
            <div class="layui-panel">
                <div class="tips"><i class="layui-icon layui-icon-tips"></i> {:lang('提示 点击左侧类目书节点可以查看子级分类')}；</div>
                <div>
                    <form class="layui-form layui-form-pane form-search" action="{:sysuri()}" onsubmit="return false" method="get" autocomplete="off" lay-filter="category_search">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">{:lang('分类名称')}</label>
                                <div class="layui-input-inline">
                                  <input type="text" name="name" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                            </div>
                        </div> 
                        <div class="layui-form-item layui-inline">
                            <input type="hidden" name="pid" value="{$pid|default=0}">
                          <button class="layui-btn" lay-submit lay-filter="demo-table-search">{:lang('搜索')}</button>
                          <button type="reset" class="layui-btn layui-btn-primary">{:lang('重置')}</button>
                        </div>
                      </form>
                    <table id="category_list" lay-filter="category_list" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
                </div>
            </div>
        </div>

    </div>
</div>

{/block}

{block name="script"}
<script type="text/html" id="toolbar">
    <!--{if auth("add")}-->
    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="sync_btn">{:lang('同步平台分类')}</a>
    <!--{/if}-->
</script>
<script type="text/html" id="operator_btn">
    <!--{if auth("add")}-->
    {{# if(d.level == 3){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="sync_attr_btn">{:lang('同步属性')}</a>
    {{# } }}
    <!--{/if}-->
</script>

<script>

    let tree = layui.tree;
    let table = layui.table;
    let pid = 0;
    let layer = layui.layer;
    let form = layui.form;

    $(function() {
        // 获取页面高度
        let height = $('.layui-card-body').height();
        $('.layui-tab-content').height(height - 70);

        $('#category_list').layTable({
            even: true,
            height: 'full',
            toolbar: '#toolbar',
            where: {},
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'name', title: '{:lang("名称")}', minWidth: 100, align: 'center'},
                {field: 'remark', title: '{:lang("描述")}', align: 'center', minWidth: 170},
                {field: 'create_at', title: '{:lang("添加时间")}', align: 'center', minWidth: 170},
                {toolbar: '#operator_btn', title: '{:lang("操作")}', align: 'center', width: 90, fixed: 'right'}
            ]]
        });

        httpRequest('{:url("getCategoryTree")}', {}, 'get', function(msg, data) {
            let list = data.list || [];
            // 渲染
            tree.render({
                elem: '#tree_list',id:'demo_1',
                data: list,
                onlyIconControl: false,  // 是否仅允许节点左侧图标控制展开收缩
                click: function(obj){
                    pid = obj.data.id;
                    form.val('category_search', {pid: pid});
                    // 刷新表格
                    table.reload('category_list', {
                        where: {pid: pid, output: 'layui.table'}
                    });
                }
            });
        });


        table.on('tool(category_list)', function(obj) {
            let data = obj.data;
            console.log(data);
            if(obj.event === 'sync_attr_btn') { // 同步属性
                httpRequest('{:url("pullAttr")}', {pid: data.pid, type_id: data.type_id, id: data.id}, 'post', function(msg) {
                    layer.msg(msg, {icon: 1});
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                })
            }
        })

        table.on('toolbar(category_list)', function(obj) {
            if(obj.event === 'sync_btn') { // 添加分类
                httpRequest('{:url("pullCategory")}', {}, 'post', function(msg) {
                    layer.msg(msg, {icon: 1});
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                })
            }
        })
 
 
        // treeId: tree所在的容器的id
        // filter: 对应的搜索框的selector或者dom对象
        // callback: 回调 参数(树节点jquery对象, 输入框对象, 匹配到的节点数量)
        let syncLayuiTreeFilter = function (treeId, filter, callback) {
            let treeElem = $('#' + treeId), filterElem = $(filter);
            if (!filterElem.length || !filterElem.length) {
                return;
            }
            // 搜索框的监听事件按实际需求来
            filterElem.unbind('change').change(function () {
                let that = this; //this;
                let value = $(that).val().trim();
                let HIDE = 'layui-hide';
                let hintClass = 'search_hit';
                // 先恢复现场
                treeElem.find('.' + HIDE).removeClass(HIDE);
                treeElem.find('.' + hintClass).removeClass(hintClass).each(function (index , item){
                    if($(item).parents('.layui-tree-set').hasClass('layui-tree-spread')){
                        $(item).parents('.layui-tree-set').filter('.layui-tree-spread.layui-tree-setHide').first().find('.layui-tree-iconClick :first').click()
                    }
                })
                // 如果有值筛选开始
                if (value) {
                    $.each(treeElem.find('.layui-tree-txt'), function (index, elem) {
                        elem = $(elem);
                        let textTemp = elem.text();
                        if (textTemp.indexOf(value) === -1) {
                            // 不存在就隐藏
                            elem.closest('.layui-tree-set').addClass(HIDE)
                        } else {
                            // 命中就添加一个class
                            elem.addClass(hintClass)
                        }
                    });
                    $.each(treeElem.find('.' + hintClass), function (index, elem) {
                        elem = $(elem);
                        // 取消隐藏所有父节点
                        elem.parents('.layui-tree-set').removeClass(HIDE);
                        // 展开所有父节点
                        elem.parents('.layui-tree-set').each(function (i, item) {
                            if (!$(item).hasClass('layui-tree-spread')) {
                                $(item).find('.layui-tree-iconClick :first').click();
                            }
                        });
                    });
                }
                typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
            });
        };
        
        syncLayuiTreeFilter('tree_list','#search_btn');
    })

    function loadData() {
        let search_key = $('#search_btn').val();
        httpRequest('{:url("getCategoryTree")}', {search_key: search_key}, 'get', function(msg, data) {
            let list = data.list || [];
            // 渲染
            tree.render({
                elem: '#tree_list',
                data: list,
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                click: function(obj){
                    pid = obj.data.id;
                    // 刷新表格
                    table.reload('category_list', {
                        where: {pid: pid, output: 'layui.table'}
                    });
                }
            });
        });

        table.reload('category_list', {
            where: {pid: pid, output: 'layui.table'}
        });
    }
</script>
{/block}
